<!-- 
 @Author: LW  
 @Date: 2021-01-08 11:30:38  
 @function: 菜单编辑框
 -->
<template>
  <div>
    <!-- ref相当于Id:model是表单内容-->
    <el-form label-width="120px" ref="modifyInfo" :rules="formInfoRules" :model="formInfo">
      <el-row>
        <el-form-item label="菜单名称：" prop="name">
          <el-input v-model="formInfo.name" autocomplete="off" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="菜单标签：" prop="icon_font">
          <el-input v-model="formInfo.icon_font" size="mini" readonly>
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-picture-outline"
              slot="append"
              @click="selectIcon()"
            >选择标签</el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="所属应用：" prop="application_ids">
          <el-select v-model="formInfo.application_ids" @change="applicationChange" style="width: 100%" size="mini">
            <el-option
              :label="item.Text"
              :value="item.Value"
              :key="item.Value"
              v-for="item in applications"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="功能类型：" prop="function_type">
            <el-radio-group v-model="formInfo.function_type">
                <el-radio :label="item.Value" :value="item.Value" :key="item.Value" v-for="item in functiontypes">
                    {{item.Text}}
                </el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="菜单链接：">
          <el-input v-model="formInfo.link_url" autocomplete="off" size="mini"></el-input>
        </el-form-item>
         <el-form-item label="是否启用：" prop="is_valid">
            <el-radio-group v-model="formInfo.is_valid">
                <el-radio :label="true">启用</el-radio>
                <el-radio :label="false">禁用</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="菜单描述：" >
          <el-input
            type="textarea"
            v-model="formInfo.describe"
            rows="3"
            autocomplete="off"
            maxlength="200"
            show-word-limit
            size="mini"
          ></el-input>
        </el-form-item>
      </el-row>
    </el-form>
    <div slot="footer " class="el-dialog__footer">
      <el-button size="mini" @click="closeDialog()">取消</el-button>
      <el-button size="mini" type="primary" :loading="loading" @click="submitForm('modifyInfo')">保存</el-button>
    </div>

     <!-- 编辑等操作弹窗 -->
    <!-- dialog 弹窗顶部下划线 v-dialogDrag可拖拽-->
    <el-dialog
      :title="editForm.formTitle"
      :visible.sync="editForm.formVisible"
      v-if="editForm.formVisible"
      width="26%"
      :modal="false"
      v-dialogDrag
      custom-class="dialog"
      :close-on-click-modal="false"
    >
      <IconForm v-bind:formInfo="formInfo" @callBack="callBack"></IconForm>
    </el-dialog>
  </div>
</template>
<script>

import IconForm from "../../../../components/common/iconfontIcon"; //编辑
import MenusHttp from "@/api/authority/menus"; //http
//定义变量
const {
  loadApplicationList, //获取应用列表信息
  loadFunctionTypeList, //获取功能类型列表信息
  addInfo,//增加数据
  modifyInfo,//编辑数据
} = MenusHttp;

export default {
  //组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，需要通过子组件的 props 选项
  //在模板中，要动态地绑定父组件的数据到子模板的 props，与绑定到任何普通的HTML特性相类似，就是用 v-bind。每当父组件的数据变化时，该变化也会传导给子组件
  props: ["formInfo"], //父界面v-bind:editInfo一致
  components: {
    IconForm
  },
  data() {
    return {
      loading: false, //是显示加载
      applications: [], //应用类型
      functiontypes: [], //功能类型
      //编辑框窗体参数
      editForm: {
        formVisible: false, //窗体是否显示
        formTitle: "" //窗体标题
      },
      //验证对象，由Rules结尾
      formInfoRules: {
        name: [
          {
            required: true,
            min: 1,
            max: 8,
            message: "菜单名称不能为空，最大长度为8",
            trigger: "blur"
          }
        ],
        icon_font: [
          {
            required: true,
            message: "菜单标签不能为空",
            trigger: "blur"
          }
        ],
         application_id: [
          {
            required: true,
            message: "所属应用不能为空",
            trigger: "blur"
          }
        ],
        function_type: [
          {
            required: true,
            message: "功能类型不能为空",
            trigger: "blur"
          }
        ],
        is_valid: [
          {
            required: true,
            message: "是否启用不能为空",
            trigger: "blur"
          }
        ]
      }
    };
  },
  /**html加载完成之前，执行。执行顺序：父组件-子组件 */
  created() {},
  /**[页面初始化方法]html加载完成后执行。执行顺序：子组件-父组件*/
  mounted() {
    //获取应用
    this.loadApplicationList();
    //获取功能类型
    this.loadFunctionTypeList();
  },
  methods: {
    //获取应用
    loadApplicationList() {
      let self = this;
      let par = {};
      loadApplicationList(par).then(response => {
        let data = response.data;
        if (data.Code === 1000) {
          self.applications = data.Data;
        }
      });
    },
    //获取功能类型
    loadFunctionTypeList(){
     let self = this;
      let par = {};
      loadFunctionTypeList(par).then(response => {
        let data = response.data;
        if (data.Code === 1000) {
          data.Data.splice(0,1);
          self.functiontypes = data.Data;
        } 
      });
    },
    //下拉选项变动触发
    applicationChange(val){
        var obj = {};
        obj = this.applications.find(item =>{
            return item.Value === val;
        });
        this.formInfo.application_name = obj.Text;
    },
    //选择标签
    selectIcon() {
      this.editForm.formVisible = true; 
      this.editForm.formTitle = "选择标签";
    },
    //编辑操作回调
    callBack(info) {
      this.editForm.formVisible = false;
      if (info != null && info != "") {
        this.formInfo.icon_font=info;
      }
    },
    //关闭增加弹出框
    closeDialog() {
      this.$emit("callBack", null);
    },
    //保存信息
    submitForm(modifyRef) {
      let self = this;
      this.$refs[modifyRef].validate(valid => {
        if (valid) {
          let par = this.formInfo;
          if (this.formInfo.id!=null&&this.formInfo.id!="") {
            modifyInfo(par).then(response => {
              let data = response.data;
              if (data.Code === 1000) {
                self.$messageTip.success(data.Msg); 
                self.$emit("callBack", data.Code);
              } else {
                self.$messageTip.warning(data.Msg); 
              }
            });
          } else {
            addInfo(par).then(response => {
              let data = response.data;
              if (data.Code === 1000) {
                self.$messageTip.success(data.Msg);
                self.$emit("callBack", data.Code);
              } else {
                self.$messageTip.warning(data.Msg);
              }
            });
          }
        } else {
          return false;
        }
      });
    }
  }
};
</script>